<template>
    <div style="padding: 20px">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="provinceValue" class="m-2" placeholder="选择所在省份" size="default"
                    @change="provinceChanged()">
                    <el-option v-for="area in province" :label="area.name" :key="area.areaId" :value="area.areaId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="areaValue" class="m-2" placeholder="选择所在城市" size="default" @change="areaChanged()">
                    <el-option v-for="area in areas" :label="area.name" :key="area.name" :value="area.name" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="collegeValue" class="m-2" placeholder="选择所在高校" size="default"
                    @change="collegeChanged()">
                    <el-option v-for="item in college" :label="item.collegeName" :key="item.collegeId"
                        :value="item.collegeId" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="editBannerConfig(null)">新建banner</el-button><br /><br />
        <el-table :data="siteBannerConfigList" border style="width: 100%">
            <el-table-column prop="bannerImgUrl" label="图片">
                <template #default="scope">
                    <el-image style="width: 100%; height: 100%" :src="scope.row.bannerImgUrl" fit="cover"
                        :preview-src-list="[scope.row.bannerImgUrl]" :z-index="100" />
                    <!-- <p>{{ scope.row.bannerImgUrl }}</p> -->
                </template>
            </el-table-column>
            <el-table-column prop="bannerTitle" label="标题" />
            <el-table-column prop="bannerDesc" label="说明" />
            <el-table-column prop="bannerBtn" label="链接按钮文本" />
            <el-table-column prop="bannerHref" label="链接" />
            <!-- <el-table-column prop="bannerStyle" label="banner样式" /> -->
            <el-table-column v-if="false" prop="bannerStatus" label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.bannerStatus" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operations">
                <template #default="scope">
                    <el-button link type="primary" @click="editBannerConfig(scope.row)">编辑</el-button>
                    <el-button link type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="编辑banner">
        <el-scrollbar height="450px">
            <el-form label-width="70px">
                <el-form-item label="图片">
                    <el-upload ref="upload" class="upload-demo" accept="image/*" name="resourceFile"
                        action="/api/site-config/upload_config_resource" :multiple="false" :data="uploadAttach"
                        :auto-upload="true" style="width:100%">
                        <template #trigger>
                            <el-button type="primary">点击选择图片</el-button>
                        </template>
                        <p>👇选择网络图片（优先）</p>
                        <el-input placeholder="选择网络图片" v-model="curBannerConfig.bannerImgUrl" style="width:100%" />
                        <template #tip>
                            <div class="el-upload__tip text-red">
                                <el-image v-if="curBannerConfig.bannerImgUrl != null"
                                    :src="curBannerConfig.bannerImgUrl" fit="cover" style="width: 200px;" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="图片高度">
                    <el-input-number v-model="curBannerConfig.height" :step="50" />
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="curBannerConfig.bannerTitle" type="text" />
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="curBannerConfig.bannerDesc" type="textarea" />
                </el-form-item>
                <el-form-item label="按钮文本">
                    <el-input v-model="curBannerConfig.bannerBtn" type="text" />
                </el-form-item>
                <el-form-item label="链接">
                    <el-input v-model="curBannerConfig.bannerHref" type="text" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="curBannerConfig.bannerStatus" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelBannerConfig">取消</el-button>
                <el-button type="primary" @click="save">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            province: [],
            areas: [],
            college: [],
            provinceValue: "",
            areaValue: "",
            collegeValue: "",
            dialogVisible: false,
            siteBannerConfigList: [],
            curBannerConfig: {
                bannerImgUrl: '',
                bannerTitle: '',
                bannerDesc: '',
                bannerHref: '',
                height: 500,
                bannerStatus: true,
                bannerBtn: ''
            },
            configId: null,
            uploadAttach: { attach: 'collegeId=2028&type=jpg' },
            header: { 'Content-Type': 'application/json' },
            adminUser: {},
            dialogActionFlag:'null'
        };
    },
    created() {

    },
    mounted() {
        if (this.$store.state.user.userId == null) {
            this.$store.dispatch("updateUser").then(() => {
                this.adminUser = this.$store.state.user
                this.init()
            });
        }
    },
    methods: {
        init() {
            fetch("/api/location/province", { method: "get" }).then((resp) => {
                resp.json().then((data) => {
                    this.province = data;
                    this.provinceValue = Number(this.adminUser.belong.split(',')[0]);
                    this.areaValue = Number(this.adminUser.belong.split(',')[1])
                    this.collegeValue = Number(this.adminUser.belong.split(',')[2])
                    this.provinceChanged();
                    this.areaChanged("北京市");
                    this.loadSiteConfig()
                });
            });
        },
        save() {
            let param = {
                configBanner: null,
                collegeId: Number(this.adminUser.belong.split(',')[2]),
                configId: this.configId
            }
            if(this.dialogActionFlag=='add'){
                this.siteBannerConfigList.push(this.curBannerConfig)
            }
            param.configBanner=JSON.stringify(this.siteBannerConfigList)
            this.$fetchutil.post('/site-config/update_banner_config', param, (resp) => {
                if (resp.code == 200) {
                    this.loadSiteConfig()
                    this.cancelBannerConfig()
                }
                this.$ElMessage({
                    message: resp.msg,
                    type: resp.code == 200?'success':'error',
                })
            })
        },
        loadSiteConfig() {
            this.$fetchutil.get('/site-config/get/' + this.collegeValue, (resp) => {
                if (resp.code != 200 || resp.data == null || resp.data == '') {
                    this.siteBannerConfigList = []
                } else {
                    this.siteBannerConfigList = JSON.parse(resp.data)
                    this.configId = resp.msg
                }
            })
        },
        editBannerConfig(bannerConfig) {
            if (bannerConfig != null) {
                this.curBannerConfig = bannerConfig
                this.dialogActionFlag='null'
            }else this.dialogActionFlag='add'
            this.dialogVisible = true
        },
        cancelBannerConfig() {
            this.dialogVisible = false
            this.curBannerConfig = {
                bannerImgUrl: '',
                bannerTitle: '',
                bannerDesc: '',
                bannerHref: '',
                height: 500,
                bannerStatus: true,
                bannerBtn: ''
            }
            this.dialogActionFlag='null'
        },
        provinceChanged() {
            fetch("/api/location/area?parentId=" + this.provinceValue, {
                method: "get",
            }).then((resp) => {
                resp.json().then((data) => {
                    this.areas = data;
                    this.college = [];
                    this.areaValue = '';
                    this.collegeValue = "";
                    this.areaChanged()
                });
            });
        },
        areaChanged() {
            fetch("/api/location/college?area=" + this.areaValue, {
                method: "get",
            }).then((resp) => {
                resp.json().then((data) => {
                    this.college = data;
                    this.collegeValue = "";
                });
            });
        },
        collegeChanged() { },
    },
};
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
}
</style>
